import {
    textIndent,
    templateBox,
    tagContent,
    returnCustomContent,
    appCode,
    importReact,
    scriptBox,
    returnAttr,
    returnTagContent,
    returnVAttr,
    vfnBox,
    fnBox,
    addEvtLis,
    addVEvtLis,
    userState,
    useEffect,
    returnFn,
    formsState,
    removeEvtLis,
    refAttr
} from "../../../static/utils/codeHTML.js"
export const data = {
    "key": "process-viewer",
    "title": "Process-Viewer 流程展示图",
    "titleText": ["流程图展示应用","组件自适应父元素宽高"],
    CODEList: [
        {
            title: '基本用法',//标题
            introduction: "最简单的用法",//简介
            btnList: [],
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    url: '1.png',
                    width: "300px",
                    height: "200px",
                    isOpen: true
                },
                {
                    url: '2.png',
                    width: "300px",
                    height: "200px",
                    isOpen: true
                },
            ],
            reactHTML: `
                ${importReact("FC")}
                ${appCode()}
                ${textIndent(
                        returnTagContent("process-viewer", `
                        <span class=code-attr-name>processinstanceid</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>1</span><span class=code-punctuation>"</span>`)
                    )}
                <span class=code-punctuation>};</span>
            `,//代码展示的HTML
            reactCode: `
            import { FC } from 'react';
            const App: FC = () => {
                return <process-viewer processinstanceid="1"></process-viewer>
            };
            `,//复制的代码
            vueHTML:`
            <p><span class="code-punctuation">&lt;</span><span class="code-tag">template</span><span class="code-punctuation">&gt;</span></p><blockquote><p><span class="code-tag"><span class="code-punctuation">&lt;</span>process-viewer&nbsp;<span class="code-attr-name">processinstanceid</span><span class="code-punctuation">=</span><span class="code-punctuation">"1"</span><span class="code-punctuation">&gt;<span class="code-def"></span></span><span class="code-punctuation">&lt;/</span><span class="code-punctuation"><span style="color: rgb(248, 29, 34);">process-viewer</span>&gt;</span></span></p></blockquote><p><span class="code-punctuation">&lt;/</span><span class="code-tag">template</span><span class="code-punctuation">&gt;</span><br></p>
            `
        }
    ],
    APIList: [
        {
            field: "processinstanceid",
            remark: "流程id",
            type: "string",
            default: ""
        },
        {
            field: "modelid",
            remark: "模块id",
            type: "string",
            default: ""
        },
        {
            field: "toolTips",
            remark: "流程节点展示信息，需要绑定ref传递",
            type: "IToolTip[]",
            default: []
        },
    ],
    otherList: [//其他
        {
            title: "IToolTip props",
            header: ["参数", "说明", "类型", "默认值"],//表头和下面list的字段顺序是对应展示的。
            colorFields: {//颜色字段
                type: "#c41d7f"
            },
            list: [
                {
                    name: "userTaskId",
                    remark: "用户任务元素id",
                    type: "string",
                    default: "",
                },
                {
                    name: "approver",
                    remark: "处理人",
                    type: "string",
                    default: "",
                },
                {
                    name: "comment",
                    remark: "处理意见",
                    type: "string",
                    default: "",
                },
            ]
        },
    ]
}
